<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="tac">
        <el-col :span="22">
          <h3>学生管理系统</h3>
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
          >
            <el-sub-menu index="/js/jsrl">
              <template #title>
                <el-icon><location /></el-icon>
                <span>首页</span>
              </template>
              <el-menu-item-group title="">
                <el-menu-item index="/xs/xsxx">个人信息</el-menu-item>
                <el-menu-item index="/xs/xscj">个人成绩</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="" @click="zhuxiao">
              <el-icon><setting /></el-icon>
              <span>退出登录</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <el-header
        ><h1>当前时间为：{{ datetime }}</h1><h3 class="ming">欢迎{{sname}}同学,来到默默摸鱼组!</h3></el-header>
      <el-main>
        <el-calendar v-model="value" v-show="$route.meta.showFooter"></el-calendar>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { defineComponent } from "vue";
import {
  Location,
  Setting,
} from "@element-plus/icons";

export default defineComponent({
  name: "xs",
  components: {
    Location,
    Setting,
  },
  data() {
    return {
      value: new Date(),
      datetime: "",
      sname:""
    };
  },
  mounted() {
    //控制秒滚动
    setInterval(this.getDatetime, 1000);
    this.sname=this.$store.state.s_number;
  },
  
  methods: {
    zhuxiao() {
      this.$router.push({ name: "kaishi" });
    },
    getDatetime() {
      //获取当前时间
      let dt = new Date();
      //年
      let year = dt.getFullYear();
      //月
      let month = dt.getMonth() + 1;
      //日
      let date = dt.getDate();
      //时
      let hour = dt.getHours();
      //分
      let minute = dt.getMinutes();
      //秒
      let second = dt.getSeconds();
      this.datetime =
        year +
        "-" +
        month +
        "-" +
        date +
        "-" +
        this.formatNum(hour) +
        ":" +
        this.formatNum(minute) +
        ":" +
        this.formatNum(second);
    },
    formatNum(num) {
      //三元运算符 看见？和：号就是三元运算符
      return num < 10 ? "0" + num : num;
    },
    jumpNewPage(p) {
      this.$router.push({ path: p });
    },
  },
});
</script>

<style >
.ming{
  color: #fff;
}
h1{
  color: #fff;
}
header {
  /*header容器，一个template必须只能有一个容器*/
  display: flex; /*弹性布局*/
  height: 100%;
  align-items: center;
  justify-content: space-between; /*不用float浮动布局，采用两边布局*/
}
.l-content {
  /*左边的菜单拉伸按钮*/
  display: flex;
  align-items: center;
}
.l-content .el-button {
  /*面包屑跟 菜单按钮的间距*/
  margin-right: 20px;
}

.r-content .user {
  /*设置图片的大小，以及圆滑度*/
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #fff;
}
.tac {
  text-align: center;
}
.el-menu-vertical-demo {
  width: 200px;
}
.el-container {
  height: 960px;
}
body {
  margin: 0;
  padding: 0;
}
.el-header,
.el-footer {
  background-color: #333333;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 75px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>